@import "./variables.module";

.sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 98;
  display: flex;
  overflow: hidden;
  width: $sideBarWidth;
  height: 100%;
  background-color: $menuBackground;
  transition: width 0.28s ease;
  flex-direction: column;



  :deep .el-menu-vertical-demo {
    border-right: none !important;
  }

  :deep .el-menu-item.is-active {
    background-color: #001528!important;

    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 4px;
      content: '';
      background: var(--el-color-primary);
    }
  }
}

.main-container {
  position: relative;
  display: flex;
  margin-left: $sideBarWidth;
  min-height: 100%;
  transition: margin-left 0.28s;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
}

.hideSidebar {
  width: 100%;
  height: 100%;

  .sidebar-container {
    width: 60px !important;
  }

  .main-container {
    margin-left: 60px !important;
  }
}
